Tạo khung đăng ký qua Email tuyệt đẹp bằng CSS cho Blogspot (Style 2)

Chào các bạn, hôm nay rảnh rỗi ngồi nghịch một tí CSS cho form đăng ký bài viết qua Email trên Blogspot.

CÁC BƯỚC THỰC HIỆN

Bước 1. Chèn CSS này vào trước thẻ ]]></b:skin>

#subscribe-form-bacsiwindows h2{margin:0;padding:0;font:500 32px Roboto;color:#ffd969}
#subscribe-form-bacsiwindows h3{color:#fff;font:300 20px Roboto;line-height:1.75;margin:15px 0;letter-spacing:-.5px}
#subscribe-form-bacsiwindows{background:linear-gradient(125deg,#7577a9 0,#35353c 100%);text-align:center;display:block;padding:55px 20px;box-sizing:border-box;position:relative;width:100%}
.form-sub-bacsiwindows{text-align:center;margin-top:20px;color:#fff}
.input_sub-bacsiwindows{background:rgba(0,0,0,0.1);border:0;padding:15px 15px 15px 60px;font:400 16px Roboto;color:#fff;width:20%;;outline:0}
input.input_sub-bacsiwindows::-webkit-input-placeholder{color:#fff}
input.input_sub-bacsiwindows::-moz-placeholder{color:#fff}
input.input_sub-bacsiwindows:-ms-input-placeholder{color:#fff}
.input-sub-bacsiwindows{display:inline;margin:12px 13px}
.input-sub-bacsiwindows i{background:rgba(0,0,0,0.2);color:#fff;margin:0;padding:16px;position:absolute}
.form-sub-bacsiwindows .buter{background:#7577a9;border-radius:0;color:#fff;display:block;margin:25px auto 0;padding:12px 0;transition:.35s;width:250px;cursor:pointer;outline:0;border:double #4e4f67;font:400 16px Roboto;letter-spacing:.0535354125em}
.form-sub-bacsiwindows .buter:hover{opacity:.69}

Bước 2. Chèn đoạn code này vào nơi bạn muốn hiển thị, nên để nó ở cuối trang giống Bác Sĩ Windows.

<div id=’subscribe-form-bacsiwindows’>
<h2>ĐĂNG KÝ BÁC SĨ WINDOWS</h2>
<h3>Khi có bài viết mới, chúng tôi sẽ thông báo cho bạn qua Email<br/>Cam kết không SPAM hay lừa đảo!</h3>
<form action=’http://feedburner.google.com/fb/a/mailverify?uri=bacsiwindowsdotcom’ class=’form-sub-bacsiwindows’ method=’post’ target=’_new’>
<div class=’input-sub-bacsiwindows’>
<i class=’fa fa-user’/>
<input class=’input_sub-bacsiwindows’ name=’name’ placeholder=’Tên của bạn’ type=’text’/>
</div>
<div class=’input-sub-bacsiwindows tilt’>
<i class=’fa fa-envelope’/>
<input class=’input_sub-bacsiwindows’ name=’email’ placeholder=’Địa chỉ Email’ type=’text’/>
</div>
<input class=’buter’ type=’submit’ value=’ĐĂNG KÝ NGAY’/></form>
<div class=’clear’/>
</div>

Bước 3. Lưu mẫu.

TỔNG KẾT

Đây là mẫu khung đăng ký mình thiết kế thấy khá đẹp mắt, nếu bạn không thích mẫu này thì có thể xem thêm 3 mẫu khác mình có đưa link ở đầu bài viết nhé! Chúc bạn thành công.